<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">

    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/flex.css" />
</head>

<body>

    <h1>Flex布局</h1>
    <h2>参考链接</h2>
    <ul>
        <li><a target="_blank" href="https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb">一劳永逸的搞定 flex 布局</a></li>
        <li><a target="_blank" href="https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html">Flex 布局教程：语法篇</a></li>
        <li><a target="_blank" href="http://www.ruanyifeng.com/blog/2015/07/flex-examples.html">Flex 布局教程：实例篇</a></li>
    </ul>


    <h2>示例效果</h2>
    <h3>居中效果</h3>
    <div class="parent_frame">
        <div class="child_frame">
        </div>
    </div>

    <pre>
&lt;div class=&quot;parent_frame&quot;&gt;
    &lt;div class=&quot;child_frame&quot;&gt;
    &lt;/div&gt;
&lt;/div&gt;

.parent_frame {
    width: 350px;
    height: 250px;
    background-color: #403e41;
    display: flex;
    justify-content: center;
    align-items: center;
}


.child_frame {
    width: 80px;
    height: 80px;
    background-color: #5ab041;
}

    </pre>


    <h2>摘抄</h2>
    <p>flex布局的核心的概念就是容器和轴。</p>
    <p>容器包括外层的父容器和内层的子容器，轴包括主轴和交叉轴</p>

    <p>其中父容器与子容器的概念，就等同于示例效果中的<strong>parent_frame</strong>和<strong>child_frame</strong>这两个div</div>
    </p>
    <p>而轴的概念如下图所示：</p>
    <a target="_blank" href="./img/flex_direction.png"><img src="./img/flex_direction.png" width="100%" /></a>

    <p>在flex布局中，flex-direction属性决定主轴的方向，交叉轴的方向由主轴确定。</p>





    <h3>父容器属性</h3>

    <ul>
        <li>
            justify-content属性用于定义如何沿着主轴方向排列子容器。
            <ul>
                <li>flex-start：起始端对齐</li>
                <li>flex-end：末尾端对齐</li>
                <li>center：居中对齐</li>
                <li>space-around：子容器沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半。</li>
                <li>space-between：子容器沿主轴均匀分布，位于首尾两端的子容器与父容器相切。</li>
            </ul>
        </li>

        <li>
            align-items 属性用于定义如何沿着交叉轴方向分配子容器的间距。
            <ul>
                <li>flex-start：起始端对齐</li>
                <li>flex-end：末尾端对齐</li>
                <li>center：居中对齐</li>
                <li>stretch：子容器沿交叉轴方向的尺寸拉伸至与父容器一致。</li>
            </ul>
        </li>
    </ul>

    <h3>子容器属性</h3>
    <ul>
        <li>
            子容器是有弹性的（flex 即弹性），它们会自动填充剩余空间，子容器的伸缩比例由 flex 属性确定。
            flex 的值可以是无单位数字（如：1, 2, 3），也可以是有单位数字（如：15px，30px，60px），还可以是 none 关键字。子容器会按照 flex 定义的尺寸比例自动伸缩，如果取值为 none
            则不伸缩。

            <ul>
                <li>flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。</li>
                <li>flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。</li>
                <li>flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。</li>
            </ul>
        </li>

        <li>
            align-self: 单独设置子容器如何沿交叉轴排列

            <ul>
                <li>flex-start：起始端对齐</li>
                <li>flex-end：末尾端对齐</li>
                <li>center：居中对齐</li>
                <li>stretch：拉伸对齐</li>
            </ul>
        </li>

    </ul>


    <h3>轴属性</h3>
    <h4>主轴方向</h4>
    <ul>
        <li>向右：flex-direction: row</li>
        <li>向下：flex-direction: column</li>
        <li>向左：flex-direction: row-reverse</li>
        <li>向上：flex-direction: column-reverse</li>
    </ul>

    <h4>交叉轴方向</h4>

    <p>主轴沿逆时针方向旋转 90° 就得到了交叉轴</p>

    <h2>Flex属性展示效果示例</h2>

    <h3>父容器: align-items: center; justify-content: center;</h3>
    <div class="flex_box_container demo1">
        <span>
            # parent <br />
            display: flex; <br />
            align-items: center; <br />
            justify-content: center;
        </span>
        <div class="flex_parent_box">
            <div class="flex_child_box">
                <span>
                    # child <br />
                    80 x 80
                </span>
            </div>
        </div>
    </div>

    <br />
    <h3>父容器: justify-content: flex-start;</h3>
    <div class="flex_box_container demo2">
        <span>
            # parent <br />
            display: flex; <br />
            justify-content: flex-start; <br />
        </span>
        <div class="flex_parent_box">
            <div class="flex_child_box1">
                <span>
                    # child 1<br />
                    100 x 80
                </span>
            </div>

            <div class="flex_child_box2">
                <span>
                    # child 2<br />
                    80 x 90
                </span>
            </div>


            <div class="flex_child_box3">
                <span>
                    # child 3<br />
                    70 x 100
                </span>
            </div>
        </div>
    </div>

    <br />
    <h3>父容器: justify-content: flex-end;</h3>
    <div class="flex_box_container demo3">
        <span>
            # parent <br />
            display: flex; <br />
            justify-content: flex-end; <br />
        </span>
        <div class="flex_parent_box">
            <div class="flex_child_box1">
                <span>
                    # child 1<br />
                    100 x 80
                </span>
            </div>

            <div class="flex_child_box2">
                <span>
                    # child 2<br />
                    80 x 90
                </span>
            </div>


            <div class="flex_child_box3">
                <span>
                    # child 3<br />
                    70 x 100
                </span>
            </div>
        </div>
    </div>


    <br />
    <h3>父容器: justify-content: center;</h3>
    <div class="flex_box_container demo4">
        <span>
            # parent <br />
            display: flex; <br />
            justify-content: center; <br />
        </span>
        <div class="flex_parent_box">
            <div class="flex_child_box1">
                <span>
                    # child 1<br />
                    100 x 80
                </span>
            </div>

            <div class="flex_child_box2">
                <span>
                    # child 2<br />
                    80 x 90
                </span>
            </div>


            <div class="flex_child_box3">
                <span>
                    # child 3<br />
                    70 x 100
                </span>
            </div>
        </div>
    </div>



    <br />
    <h3>父容器: justify-content: space-around;</h3>
    <div class="flex_box_container demo5">
        <span>
            # parent <br />
            display: flex; <br />
            justify-content: space-around; <br />
        </span>
        <div class="flex_parent_box">
            <div class="flex_child_box1">
                <span>
                    # child 1<br />
                    100 x 80
                </span>
            </div>

            <div class="flex_child_box2">
                <span>
                    # child 2<br />
                    80 x 90
                </span>
            </div>


            <div class="flex_child_box3">
                <span>
                    # child 3<br />
                    70 x 100
                </span>
            </div>
        </div>
    </div>


    <br />
    <h3>父容器: justify-content: space-between;</h3>
    <div class="flex_box_container demo6">
        <span>
            # parent <br />
            display: flex; <br />
            justify-content: space-between;<br />
        </span>
        <div class="flex_parent_box">
            <div class="flex_child_box1">
                <span>
                    # child 1<br />
                    100 x 80
                </span>
            </div>

            <div class="flex_child_box2">
                <span>
                    # child 2<br />
                    80 x 90
                </span>
            </div>


            <div class="flex_child_box3">
                <span>
                    # child 3<br />
                    70 x 100
                </span>
            </div>
        </div>
    </div>



    <br />
    <h3>父容器: align-items: flex-start;</h3>
    <div class="flex_box_container demo7">
        <span>
            # parent <br />
            display: flex; <br />
            align-items: flex-start;<br />
        </span>
        <div class="flex_parent_box">
            <div class="flex_child_box1">
                <span>
                    # child 1<br />
                    100 x 80
                </span>
            </div>

            <div class="flex_child_box2">
                <span>
                    # child 2<br />
                    80 x 90
                </span>
            </div>


            <div class="flex_child_box3">
                <span>
                    # child 3<br />
                    70 x 100
                </span>
            </div>
        </div>
    </div>



    <br />
    <h3>父容器: align-items: flex-end;</h3>
    <div class="flex_box_container demo8">
        <span>
            # parent <br />
            display: flex; <br />
            align-items: flex-end;<br />
        </span>
        <div class="flex_parent_box">
            <div class="flex_child_box1">
                <span>
                    # child 1<br />
                    100 x 80
                </span>
            </div>

            <div class="flex_child_box2">
                <span>
                    # child 2<br />
                    80 x 90
                </span>
            </div>


            <div class="flex_child_box3">
                <span>
                    # child 3<br />
                    70 x 100
                </span>
            </div>
        </div>
    </div>


    <br />
    <h3>父容器: align-items: center;</h3>
    <div class="flex_box_container demo9">
        <span>
            # parent <br />
            display: flex; <br />
            align-items: center;<br />
        </span>
        <div class="flex_parent_box">
            <div class="flex_child_box1">
                <span>
                    # child 1<br />
                    100 x 80
                </span>
            </div>

            <div class="flex_child_box2">
                <span>
                    # child 2<br />
                    80 x 90
                </span>
            </div>


            <div class="flex_child_box3">
                <span>
                    # child 3<br />
                    70 x 100
                </span>
            </div>
        </div>
    </div>


    <br />
    <h3>父容器: align-items: stretch;</h3>
    <div class="flex_box_container demo10">
        <span>
            # parent <br />
            display: flex; <br />
            align-items: stretch;<br />
        </span>
        <div class="flex_parent_box">
            <div class="flex_child_box1">
                <span>
                    # child 1<br />
                </span>
            </div>

            <div class="flex_child_box2">
                <span>
                    # child 2<br />
                </span>
            </div>


            <div class="flex_child_box3">
                <span>
                    # child 3<br />
                </span>
            </div>
        </div>
    </div>



    <br />
    <h3>子容器: flex-grow: 1;  flex-grow: 2; flex-grow: 4;</h3>
    <div class="flex_box_container demo11">
        <span>
            # parent <br />
            display: flex; <br />
        </span>
        <div class="flex_parent_box">
            <div class="flex_child_box1">
        
            </div>

            <div class="flex_child_box2">
            
            </div>


            <div class="flex_child_box3">
                <span>
                    # child 3<br />
                    flex-grow: 4;
                </span>
            </div>
        </div>
    </div>


    <br />
    <h3>子容器: flex-shrink: 0;flex-shrink: 1;flex-shrink: 1;</h3>
    <div class="flex_box_container demo12">
        <span>
            # parent <br />
            display: flex; <br />
        </span>
        <div class="flex_parent_box">
            <div class="flex_child_box1">
                <span>
                    # child 3<br />
                    width: 120px;<br />
                    flex-shrink: 0;
                </span>
            </div>

            <div class="flex_child_box2">
                <span>
                    # child 3<br />
                    width: 120px;<br />
                    flex-shrink: 1;
                </span>
            </div>


            <div class="flex_child_box3">
                <span>
                    # child 3<br />
                    width: 120px;<br />
                    flex-shrink: 1;
                </span>
            </div>
        </div>
    </div>


    <br />
    <h3>子容器: flex-basis: 100px;flex-basis: 80px;flex-basis: 70px;</h3>
    <div class="flex_box_container demo13">
        <span>
            # parent <br />
            display: flex; <br />
        </span>
        <div class="flex_parent_box">
            <div class="flex_child_box1">
                <span>
                    # child 3<br />
                    flex-basis: 100px;
                </span>
            </div>

            <div class="flex_child_box2">
                <span>
                    # child 3<br />
                    flex-basis: 80px;
                </span>
            </div>


            <div class="flex_child_box3">
                <span>
                    # child 3<br />
                    flex-basis: 70px;
                </span>
            </div>
        </div>
    </div>



    <br />
    <h3>子容器: align-self: flex-start; align-self: flex-end; align-self: center;</h3>
    <div class="flex_box_container demo14">
        <span>
            # parent <br />
            display: flex; <br />
            align-items: center; <br />
        </span>
        <div class="flex_parent_box">
            <div class="flex_child_box1">
                <span>
                    # child 3<br />
                    align-self: flex-start;
                </span>
            </div>

            <div class="flex_child_box2">
                <span>
                    # child 3<br />
                    align-self: flex-end;
                </span>
            </div>


            <div class="flex_child_box3">
                <span>
                    # child 3<br />
                    align-self: center;
                </span>
            </div>
        </div>
    </div>
</body>
</html>